<script lang="ts" setup>
import demo from "@/store/demo";
import {ref} from "vue";
import {getInfo} from "@/api/demo";
import type {Dayjs} from 'dayjs';
import SvgIcon from "@/components/SvgIcon.vue";
const useDemo = demo()
const num = ref(0)
const updateStateVal = () => {
  num.value++
  useDemo.updateState({
    title: `演示${num.value}`
  })
}
const result = ref({})
const queryInfo = () => {
  getInfo().then(({code, data}) => {
    if (!code) {
      result.value = data
    }
  }).catch((err: void) => {
    console.error(err)
  })
}
const envTitle = ref('')
const queryEnv = () => {
  envTitle.value = `${import.meta.env.MODE}-${import.meta.env.ENV_TITLE}`
}
type RangeValue = [Dayjs, Dayjs];
const dateArr = ref<RangeValue>();
const rangePickerRef = ref()
const dateArrChange = () => {
  rangePickerRef.value.blur()
  console.log(dateArr.value)
}
</script>
<template>
  <div class="demo">
    <svg-icon name="vue" size="120px"/>
    <br>
    {{ useDemo.title }}
    <a-button type="primary" @click="updateStateVal">更改title</a-button>
    <div class="round"></div>
    <a-button type="primary" @click="queryInfo">获取信息</a-button>
    <br>
    Response:{{ result }}
    <br>
    <a-button type="primary" @click="queryEnv">获取当前环境</a-button>
    <br>
    ENV:{{ envTitle }}
    <br>
    <a-range-picker ref="rangePickerRef" v-model:value="dateArr" valueFormat="YYYY-MM-DD" @change="dateArrChange"/>
  </div>
</template>
<style lang="scss" scoped>
.demo {
  .round {
    background: $color-primary;
    width: 100px;
    @extend .flex-center;
    @include half_radius(100px);
  }
}
</style>